<html>
	<head>
		<title>jQuery操作表格</title>
		<meta charset="UTF-8"/>
		<!--
			jQuery学习的内容：
				1、jQuery的封装原理（闭包，匿名自调用）
				2、jQuery的选择器
				3、jQuery操作元素的属性、内容、样式、文档结构
				4、jQuery中的事件
				5、jQuery中的动画
				注意：
					一定不要二合一操作
				js、jQuery是动态的脚本语言，用来操作HTML的，让网页和用户之间互动
				HTML用来格式化展示信息
				CSS用来增加网页样式
				都是由浏览器解析执行的
			
			注意：
				所有的网页都是存储在服务器端，运行在浏览器端。
				所有的网页都是服务器实时的根据请求发送给浏览器执行的。
				所有的网页数据可以实现动态的拼接。
		-->
		<!--
			1、jquery操作checkbox
				操作checkbox的选择状态使用prop()方法
					prop("checked")//返回选择的状态，选择返回true,未选返回false
					prop("checked",true)//置为选择状态
					prop("checked",false)//置为未选状态
				使用each进行遍历
					对象名.each(fn)//在遍历的时候会给每个对象默认执行fn函数
					this表示js对象
					$(this)表示jQuery对象
				parents("标签名")//获取指定的上级元素对象
				parent()
			2、jQuery操作表格
		-->		
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//实现全选
				$(function(){
					//给按钮绑定单击事件
					$("#btn1").click(function(){
						//实现全选
						$("input[type='checkbox']").prop("checked",true);
					});
				})
			//实现取消选择
				$(function(){
					//给按钮绑定事件
					$("#btn2").click(function(){
						//实现全不选
						$("input[type='checkbox']").prop("checked",false);
					})
				})
			//反选
				$(function(){
					//给按钮绑定事件
					$("#btn3").click(function(){
						$("input[type='checkbox']").each(function(){
							//alert(this.checked);
							$(this).prop("checked",!$(this).prop("checked"));
						})
					})					
				})
			//选择奇数行
				$(function(){
					$("#btn4").click(function(){
						$("input[type=checkbox]:odd").prop("checked",true)
					})
				})
			//隔行变色
				$(function(){
					$("#btn5").click(function(){
						$("tr:odd").css("background-color","orange");
					})
				})
			//删除选中的行
				$(function(){
					$("#btn6").click(function(){
						$(":checkbox:checked").parents("tr").remove();
					})
					
				})
			//添加行---操作文档结构
				$(function(){
					$("#btn7").click(function(){
						$("tr:last").after("<tr><td><input type='checkbox' name='chk' id='chk' value='' /></td><td>"+name+"</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>");
					})
				})
		</script>
		<style type="text/css">
			tr{
				height: 35px;
			}
			td{
				width: 100px;
			}
		</style>
	</head>
	<body>
		<h3>操作表格</h3>
		<input type="button" name="" id="btn1" value="全选" />
		<input type="button" name="" id="btn2" value="全不选" />
		<input type="button" name="" id="btn3" value="反选" />
		<input type="button" name="" id="btn4" value="选择奇数行" />
		<input type="button" name="" id="btn5" value="隔行变色" />
		<input type="button" name="" id="btn6" value="删除行" />
		<input type="button" name="btn7" id="btn7" value="添加行" />
		<hr />
		<table  border="1px">
			<tr>
				<td><input type="checkbox" name="chk" id="chk" value="" /></td>
				<td>12344</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="chk" value="" /></td>
				<td>12355</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="chk" value="" /></td>
				<td>12366</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="chk" value="" /></td>
				<td>12377</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
		</table>
		
		
		
		
	</body>
</html>